import * as React from 'react';
import '../../static/writeArticle.css';
import ListFactory, {IListFactoryElement} from './lib/ListFactory';
import API from "../../API";
import SubListFactory from "./lib/SubListFactory";
import {connect} from 'react-redux';
import {refreshListAction} from "../../action";
import {IReducer} from "../../reducer";

interface IModificationProps {
    liLists: ListFactory,
    setSubMenuStateAndRefreshSubMenu: (subMenuList:SubListFactory) => void | undefined
    componentRefreshReduce?:any
    dispatch:(data?:any)=>any
}

class AnthologyList extends React.Component<IModificationProps> {

    componentDidMount(){
        this.props.dispatch(refreshListAction(
            {refreshAndUpdateArticleList:this.refreshAndUpdateArticleList(this)}));

    }

    getAnthology(){
        return API.post.getAnthology().then((res)=>{
            const {result} = res.data;
            return result.map((val:any)=>{
                return {
                    anthologyTitle : val.anthology,
                    storeId : val.id
                }
            });
        });
    }

    refreshAndUpdateArticleList(_this:any){
        return async function () {
            _this.getAnthology().then((_result:any)=>{
                _this.props.liLists.againSetList(_result);
                _this.setState({});
            })
        }
    }

    async setCurrentIndex(index:number, e:any){
        e.stopPropagation();
        this.props.liLists.noDisplayModificationMenu();
        this.props.liLists.list[index].onlyDisplayOwn();
        const subMenuList = await this.updateArticleList();
        this.props.setSubMenuStateAndRefreshSubMenu(subMenuList);
    }

    /**
     * 更新文章列表
     * */
    updateArticleList(){
        const liLists:ListFactory = this.props.liLists;
        const index = liLists.findSelectedIndex();
        const anthology = liLists.list[index].anthologyTitle;
        return API.post.getArticleAll({anthology,author:'coffeeCat'}).then((result)=>{
            const index = this.props.liLists.findSelectedIndex();
            const subMenuList = this.props.liLists.list[index].subMenuList;
            result.data.result.forEach((val:any)=>{
                val.abstract = '';
                val.wordCount=0;
                val.storeId = val.id;
            });
            subMenuList.againSetList(result.data.result);
            return subMenuList;
        });
    }

    isChangeModificationDisplay(index:number, e:any){
        e.stopPropagation();
        this.props.liLists.list[index].onlyDisplayModificationMenuOwn();
        this.setState({});
    }

    isChangeModificationNoDisplay(index:number, e:any){
        e.stopPropagation();
        this.props.liLists.noDisplayModificationMenu();
        this.setState({});
    }

    async deleteAnthology(index:number,e:Event){
        e.stopPropagation();
        const storeId = this.props.liLists.list[index].storeId;
        await API.post.deleteAnthology({storeId,author:'coffeeCat'}).then((res)=>{console.log(res)});
        await this.getAnthology().then((_result)=>{
            this.props.liLists.againSetList(_result);
            this.props.liLists.noDisplayModificationMenu();
            const {refreshWriteArticle} = this.props.componentRefreshReduce;
            console.log(refreshWriteArticle);
            refreshWriteArticle();
            // this.setState({});
        });

    }

    modificationMenuOpen(val:IListFactoryElement,index:number){
        return (
                <li key={index} className={"menuItem isClicked"} onClick={this.isChangeModificationNoDisplay.bind(this, index)}>
                    <div className={'modification-button'}
                         onClick={this.isChangeModificationDisplay.bind(this, index)}>&#xe60b;
                        <ul className={"modification-list-display"}>
                            <li className={"modification-item modification-item-modify"}>修改文集</li>
                            <li className={"modification-item modification-item-delete"}
                                onClick={this.deleteAnthology.bind(this,index)}>删除文集</li>
                        </ul>
                    </div>
                    <span className={"menuItemTitle"}
                          onClick={this.setCurrentIndex.bind(this,index)}>{val.anthologyTitle}</span>
                </li>
        )
    };

    modificationMenuClose(val:IListFactoryElement,index:number){
        return (
                <li key={index}
                    className={"menuItem isClicked"}
                    onClick={this.isChangeModificationNoDisplay.bind(this, index)}>
                    <div className={'modification-button'}
                         onClick={this.isChangeModificationDisplay.bind(this, index)}>&#xe60b;</div>
                    <span className={"menuItemTitle"}
                          onClick={this.setCurrentIndex.bind(this,index)}>{val.anthologyTitle}</span>
                </li>
        )
    };

    render() {
        const liLists =  this.props.liLists;
        const modificationMenu = liLists.list.map((val: IListFactoryElement, index: number) => {
            let modificationMenuOpen = this.modificationMenuOpen(val,index);
            let modificationMenuClose = this.modificationMenuClose(val,index);
            if (val.isSelected) {
                if(val.isModificationMenuOpen){return modificationMenuOpen}
                else{return modificationMenuClose}}
                else {
                return (
                        <li key={index} className={"menuItem isClick"}
                            onClick={this.setCurrentIndex.bind(this, index)}>
                            <span>{val.anthologyTitle}</span></li>
                )
            }
        });

        if(modificationMenu.length!==0){
            return (
                <ul className={"menuList"}>
                    {modificationMenu}
                </ul>
            )
        } else{
            return null
        }
    }
}

//TODO 该组件无法感知到props变化的原因是options对象的pure属性默认为true(浅对比),改为false后即可
//https://www.cnblogs.com/wandiao/p/7271552.html

function mapStateToProps(state:IReducer){
    const {componentRefreshReduce} = state;
    return {componentRefreshReduce}
}

function mapDispatchToProps(dispatch:any) {
    return {dispatch};
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    undefined,
    {pure:false})(AnthologyList);
